<template>
  <div class="container">
    <!-- 切换按钮 -->
    <div class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
      <div class="flex-center v-align-c">
        <div
          @click="changeAccount"
          class="flex v-align-c width-90 pad-t-10 pad-b-10 mar-t--5 mar-b--5">
          <img
            v-if="fileSpace"
            :src="fileSpace + '/images/icon-change-1.png'"
            class="width-18 height-17 mar-r-4 mar-l-15"
            alt="">
          <span class="font-color-white font-12">切换账号</span>
        </div>
        <label class="top-txt flex-item">个人中心</label>
        <div class="width-90"></div>
      </div>
    </div>
    <div :style="'height: '+ spaceBarHeight + 'px'"></div>
    <div class="pos-rel pad-l-15 pad-r-15">
      <header-bg></header-bg>
      <get-user-info v-if="isGetUserInfo" pageType="personal" @updateUserInfo="initMemberInfo"></get-user-info>
      <!-- 用户信息 -->
      <div class="flex user-info-box pad-t-15 flex-between">
        <div class="flex flex-center" @click="goUserInfo">
          <div class="user-img-box">
            <img
              v-if="fileSpace"
              class="width-46 height-46"
              @click="regBtn"
              :src="avatarImg" alt="">
          </div>
          <div class="flex-col mar-l-10" v-if="getCustomerId">
            <span class="font-16 font-white font-w">{{ getNickName }}</span>
            <span v-if="getPhone" class="font-12 font-white">{{ formatPhone }}</span>
          </div>
          <div v-else class="font-18 font-white mar-l-10" @click="regBtn">
            登录/注册
          </div>
        </div>
        <template v-if="getRoleType !== 2">
          <!-- applyShow:  -1为未申请主播, 0为申请中 -->
          <div v-if="applyShow === 0" class="flex user-status flex-center">
            <span class="white-dot"></span>
            <span class="font-12">审核中</span>
          </div>
          <div v-if="applyShow === -1" class="flex user-status flex-center" @click="applyAnchor">
            <span class="font-12">申请主播</span>
          </div>
        </template>
      </div>
      <!-- 明细 -->
      <div v-if="getRoleType !== 2" class="detail-info-box border-radius-5 mar-t-20">
        <div class="flex-between flex pad-l-10 pad-r-10">
          <div class="date-tab">
            <ul class="flex font-15">
              <li
                @click="changeDateTab(index)"
                class="pad-t-12 pad-b-12"
                v-for="(item, index) of dateTabs" :key="index"
                :class="{'font-w': index === activeDateTabIndex, 'mar-l-30': index !== 0}">
                {{item}}
                <span class="active-line" v-if="index === activeDateTabIndex"></span>
              </li>
            </ul>
          </div>
          <div class="view-detail v-align-c" @click="$pt.navigateTo({url: '/pages/personal/income/main'})">
            <span class="font-12 mar-r-6">查看明细</span>
            <van-icon name="arrow" size="12px"/>
          </div>
        </div>
        <div class="flex flex-between mar-t-12 pad-l-10 pad-r-10">
          <div class="flex-col count-info" @click="promatModel(1)">
            <span class="font-20 font-w">{{incomeInfo.orderNum}}</span>
            <span class="font-12 v-align-c mar-t-4">订单(笔)<van-icon name="question-o" size="16px" /></span>
          </div>
          <div class="flex-col count-info" @click="promatModel(2)">
            <span class="font-20 font-w">{{incomeInfo.totalPrice}}</span>
            <span class="font-12 v-align-c mar-t-4">成交额(元)<van-icon name="question-o" size="16px" /></span>
          </div>
          <div class="flex-col count-info" @click="promatModel(3)">
            <span class="font-20 font-w">{{incomeInfo.anchorCommission}}</span>
            <span class="font-12 v-align-c mar-t-4">预计收入(元)<van-icon name="question-o" size="16px" /></span>
          </div>
        </div>
      </div>
      <!-- 我的样品 -->
      <div class="pancel-bar none-radius mar-b-10 mar-t-15">
        <div class="flex v-align-c pad-t-10 pad-b-5">
          <h3 class="font-15 font-color-3 font-w pad-l-17 flex-item">我的样品</h3>
          <div class="font-12 flex v-align-c mar-r-12" @click="customerOrderTo">
            <span>全部订单</span>
            <icon class="iconfont icon-arrow-right font-color-3 font-12 mar-t-2"></icon>
          </div>
        </div>      
        <ul class="flex v-align-c pad-t-19 pad-b-17 shop-tools">
          <li class="self-flex-item flex-col flex-between" @click="toOrder('wDeliver')">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-df.png'" class="width-22 height-20" alt="">
            <label class="font-12 font-color-3 mar-t-12">待发货</label>
            <span class="num-tag" v-if="mySample.paidUnreadProjectOrderNum">{{mySample.paidUnreadProjectOrderNum}}</span>
          </li>
          <li class="self-flex-item flex-col flex-between" @click="customerOrderTo('shipped')">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-ds.png'" class="width-26 height-21" alt="">
            <label  class="font-12 flex-col font-color-3 mar-t-12">待收货</label>
            <span class="num-tag" v-if="mySample.deliveredUnreadProjectOrderNum">{{mySample.deliveredUnreadProjectOrderNum}}</span>
          </li>
          <li class="self-flex-item flex-col flex-between" @click="customerOrderTo('received')">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-ys.png'" class="width-23 height-22" alt="">
            <label  class="font-12 font-color-3 mar-t-12">已收货</label>
            <span class="num-tag" v-if="mySample.receivedUnreadProjectOrderNum">{{mySample.receivedUnreadProjectOrderNum}}</span>
          </li>
          <li class="self-flex-item flex-col flex-between" @click="customerReturnEls('buyer')">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-refund.png'" class="width-19 height-23" alt="">
            <label  class="font-12 font-color-3 mar-t-12">退款/售后</label>
            <span v-if="mySample.afterSaleOrderNum" class="num-tag">{{ mySample.afterSaleOrderNum }}</span>
          </li>
        </ul>
      </div>
      <!-- 常用功能 -->
      <div class="pancel-bar none-radius mar-b-10 mar-t-15">
        <h3 class="font-15 font-color-3 font-w pad-l-17">常用功能</h3>
        <ul class="flex v-align-c pad-t-19 pad-b-17 shop-tools">
          <li class="self-flex-item flex-col flex-between" @click="$pt.navigateTo({url:'/pages/personal/address/main'})">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-address.png'" class="width-19 height-22" alt="">
            <label class="font-12 font-color-3 mar-t-12">收货地址</label>
          </li>
          <li class="self-flex-item flex-col flex-between" @click="$pt.navigateTo({url:'/pages/personal/help/main'})" v-if="false">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-help.png'" class="width-22 height-22" alt="">
            <label  class="font-12 flex-col font-color-3 mar-t-12">帮助中心</label>
          </li>
          <li class="self-flex-item flex-col flex-between" @click="concatService">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-service.png'" class="width-23 height-21" alt="">
            <label  class="font-12 font-color-3 mar-t-12">联系客服</label>
          </li>
          <li v-if="getRoleType !== 2" class="self-flex-item flex-col flex-between" @click="toPcTerminal">
            <img v-if="fileSpace" :src="fileSpace + '/images/anchor-pc.png'" class="width-24 height-22" alt="">
            <label  class="font-12 font-color-3 mar-t-12">PC电脑端</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="div-pop" v-if="layerBoolean">
      <get-customer-layer :info="serviceInfo" @close="closeLayer" />
    </div>
    <van-dialog use-slot :show="showPromat" :show-cancel-button="false" confirmButtonText="朕知道了" @close="closePromat">
      <div class="pad-t-30 pad-b-30 pad-l-20 pad-r-20 text-align-c">
        {{promatText}}
      </div>
    </van-dialog>
    <identity-type v-if="anchorBoolean"></identity-type>
    <!-- 选择身份：主播、中介 -->
    <user-type v-if="userTypeBoolean" ref="loginLayer"></user-type>
  </div>
</template>

<script>
import HeaderBg from '@/components/headerBg'
import GetCustomerLayer from '@/components/GetCustomerLayer'
import GetUserInfo from '@/components/GetUserInfo'
import identityType from '@/components/identityType'
import UserType from '@/components/UserType'
import { listEnterpriseMessageConfig, checkIsLogin } from '@/api/common'
import { getCustomerInfo, getAnchorApplyList, statIncomeByRange, statOrderByMemberId } from '@/api/personal'
import { getMemberInfo } from '@/api/home'
import { getAuth } from '@/api/login'
import { setNickName, setRoleType, setCustomerId, setPhone, setEnterpriseId, setAnchorType, setShowBuyCard } from '@/utils/auth'

export default {
  components: { HeaderBg, GetCustomerLayer, GetUserInfo, identityType, UserType },
  data() {
    return {
      activeDateTabIndex: 0,
      dateTabs: ['今日', '前7天', '前30天'],
      layerBoolean: false,
      serviceInfo: {}, // 客服信息
      messageIdsArr: [
        {
          dataArr: ['3101', '3103', '3104'], // 已收货、待发货、待收货 消息订阅
          ids: []
        }
      ],
      memberInfo: {},
      formatPhone: '',
      isGetUserInfo: false,
      applyShow: -2,
      startDate: '',
      endDate: '',
      incomeInfo: {}, // 收入状况信息
      mySample: {
        paidUnreadProjectOrderNum: '', // 待发货
        deliveredUnreadProjectOrderNum: '', // 待收货
        receivedUnreadProjectOrderNum: '', // 已收货
        allOrderNum: '', // 全部订单
        afterSaleOrderNum: '' // 售后
      }, // 我的样品 角标信息
      showPromat: false,
      promatText: '',
      anchorBoolean: false,
      promptText: '',
      platformObj: {},
      statusNum: null,
      applyLen: 0,
      avatarImg: '',
      statusBarHeight: 0,
      spaceBarHeight: 0,
      statusBarTop: 0,
      userTypeBoolean: false,
      authCustomerId: '',
      authPhone: '',
      authCustomerData: false
    }
  },
  onLoad() {
    this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    // 店铺信息栏
    this.statusBarTop = this.statusBarHeight - 38
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      this.statusBarTop = this.statusBarHeight - 37
    }
  },
  mounted() {
  },
  async onShow() {
    this.showTabBar()
    if (!this.$pt.getStorageSync('openId') || !this.$pt.getStorageSync('showBuyCard')) {
      await this.authEls()
    }
    await this.checkIsLogin(this.$pt.getStorageSync('openId'))
    if (this.authCustomerData && this.getRoleType !== 2) {
      await this.authAgainEls()
    }
    this.init()
    if (this.$pt.getStorageSync('anchorAuth')) {
      this.$pt.removeStorageSync('anchorAuth')
    }
    if (this.userTypeBoolean) {
      this.hideTabBar()
    }
  },
  methods: {
    async changeReload() {
      await this.authEls()
      await this.checkIsLogin(this.$pt.getStorageSync('openId'))
      if (this.authCustomerData && this.getRoleType !== 2) {
        await this.authAgainEls()
      }
      this.getMemberInfo()
      this.init()
    },
    authEls() {
      return new Promise((resolve, reject) => {
        let that = this
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                if (response.data.customerId) {
                  that.authCustomerId = response.data.customerId
                }
                if (response.data.phone) {
                  that.authPhone = response.data.phone
                }
                if (response.data.showBuyCard) {
                  setShowBuyCard(response.data.showBuyCard)
                }
                resolve(true)
              }).catch(() => {
              })
            }
          }
        })
      })
    },
    authAgainEls() {
      return new Promise((resolve, reject) => {
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                if (response.data.customerId) {
                  setCustomerId(response.data.customerId)
                }
                if (response.data.phone) {
                  setPhone(response.data.phone)
                }
                if (response.data.showBuyCard) {
                  setShowBuyCard(response.data.showBuyCard)
                }
                resolve(true)
              }).catch(() => {
              })
            }
          }
        })
      })
    },
    loginBackEls() {
      this.init()
    },
    init() {
      // 今日时间
      this.startDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
      this.endDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
      this.statIncomeByRange()
      this.statOrderByMemberId()
      for (let item of this.messageIdsArr) {
        this.messageSubscription(item)
      }
      this.getMemberInfo()
      this.getAnchorApplyList()
    },
    nextTickLoginEls() {
      this.$nextTick(() => {
        this.$refs.loginLayer.selUser(2)
      })
    },
    checkIsLogin(openId) {
      return new Promise((resolve, reject) => {
        checkIsLogin({ openId: openId }).then((response) => {
          if (response.isError) return
          if (response.code === 5000 && this.getCustomerId) {
            // 没登录过
            this.$pt.setStorageSync('loginCode', response.code)
          }
          if (response.code === 5001) {
            // 中介登录账号密码，存在异常
            setCustomerId('')
            setPhone('')
            setNickName('')
            setRoleType('')
            this.$utils.showToast({ title: response.msg })
            this.hideTabBar()
            this.userTypeBoolean = true
            this.nextTickLoginEls()
            this.$pt.setStorageSync('loginCode', response.code)
          }
          if (response.code === 101) {
            setRoleType(response.data.roleType)
            this.$pt.removeStorageSync('customerId')
            switch (response.data.roleType) {
              case 1:
                // 主播身份
                this.$pt.setStorageSync('loginCode', 1)
                if (!response.data.customerMemberId && this.authCustomerId) {
                  setCustomerId(this.authCustomerId)
                }
                this.authCustomerData = false
                if (!response.data.customerMemberId && !this.authCustomerId) {
                  this.authCustomerData = true
                }
                if (!response.data.customerMemberId && this.authPhone) {
                  setPhone(this.authPhone)
                }
                if (response.data.customerMemberId) {
                  setCustomerId(response.data.customerMemberId)
                }
                break
              case 2:
                // 中介身份
                setCustomerId(response.data.partnerId)
                setPhone(response.data.phone)
                if (response.data.partnerName) {
                  setNickName(response.data.partnerName)
                }
                if (response.data.enterpriseId) {
                  setEnterpriseId(response.data.enterpriseId)
                }
                setAnchorType(1)
                this.$pt.setStorageSync('loginCode', 2)
                break
            }
          }
          resolve(true)
        }).catch(() => {
        })
      })
    },
    showTabBar() {
      this.$pt.showTabBar({
        animation: false
      })
    },
    hideTabBar() {
      this.$pt.hideTabBar({
        animation: false
      })
    },
    changeAccount() {
      const that = this
      this.$pt.showModal({
        content: '确定要切换账号吗？',
        success(res) {
          if (res.confirm) {
            that.userTypeBoolean = true
            that.hideTabBar()
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
    },
    // 获取收入状况信息
    statIncomeByRange() {
      let data = {
        customerId: this.getCustomerId,
        startDate: this.startDate,
        endDate: this.endDate
      }
      statIncomeByRange(data).then(res => {
        this.$set(this.incomeInfo, 'totalPrice', res.data.totalPrice)
        this.$set(this.incomeInfo, 'orderNum', res.data.orderNum)
        this.$set(this.incomeInfo, 'anchorCommission', res.data.anchorCommission)
      })
    },
    // 获取订单统计(我的样品角标数)
    statOrderByMemberId() {
      let data = {
        memberId: this.getCustomerId,
        memberType: 2
      }
      statOrderByMemberId(data).then(res => {
        this.mySample.paidUnreadProjectOrderNum = res.data.paidUnreadProjectOrderNum * 1
        this.mySample.deliveredUnreadProjectOrderNum = res.data.deliveredUnreadProjectOrderNum * 1
        this.mySample.receivedUnreadProjectOrderNum = res.data.receivedUnreadProjectOrderNum * 1
        this.mySample.allOrderNum = this.mySample.paidUnreadProjectOrderNum + this.mySample.deliveredUnreadProjectOrderNum + this.mySample.receivedUnreadProjectOrderNum
        this.mySample.afterSaleOrderNum = res.data.afterSaleOrderNum * 1
      })
    },
    // 手机号处理
    phoneFormat(str) {
      let reg = /^(\d{3})\d*(\d{4})$/
      return str.replace(reg, '$1****$2')
    },
    promatModel(index) {
      switch (index) {
        case 1:
          this.promatText = '主播在微信小程序直播+抖音+快手等平台产生的订单数'
          break
        case 2:
          this.promatText = '主播在微信小程序直播+抖音+快手等平台产生的订单金额'
          break
        case 3:
          this.promatText = '主播在微信小程序直播+抖音+快手等平台产生的主播佣金收入'
          break
      }
      this.showPromat = true
    },
    closePromat() {
      this.showPromat = false
    },
    // 手机号中间四位*
    phoneStr(str) {
      let reg = /^(\d{3})\d*(\d{4})$/
      return str.replace(reg, '$1****$2')
    },
    regBtn() {
      if (this.getCustomerId) return
      this.hideTabBar()
      if (!this.$pt.getStorageSync('roleType')) {
        this.userTypeBoolean = true
        return
      }
      this.isGetUserInfo = true
    },
    customerReturnEls(type) {
      this.$pt.navigateTo({ url: '/pages/personal/order/refund-list/main?type=buyer' })
    },
    initMemberInfo() {
      this.init()
    },
    getMemberInfo() {
      if (this.getPhone) {
        this.formatPhone = this.phoneStr(this.getPhone)
      }
      if (this.getRoleType === 2) {
        this.avatarImg = this.fileSpace + '/images/default-avatar.png'
        return
      }
      if (!this.getCustomerId) {
        this.avatarImg = this.fileSpace + '/images/default-avatar.png'
        return
      }
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
        this.avatarImg = this.memberInfo.avatar
        setNickName(this.memberInfo.nickname)
        if (this.memberInfo.phone) {
          setPhone(this.memberInfo.phone)
        } else {
          setPhone('')
        }
      }).catch(() => {
      })
    },
    getAnchorApplyList() {
      if (!this.getCustomerId) return
      getAnchorApplyList({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        let resData = response.data
        this.applyLen = response.data.length
        // item.applyStatus  为0申请中, 为1申请通过，为2申请拒绝
        // applyShow:  -1为未申请主播, 0为申请中
        // 个人中心页需求，只展示主播，未申请、申请中状态，不展示已成为主播状态
        this.applyShow = -2
        if (resData.length) {
          resData.forEach(item => {
            if (item.applyStatus === 0) {
              this.applyShow = 0
            }
          })
        } else {
          this.applyShow = -1
        }
        // console.log('this.applyShow aaa', this.applyShow)
      })
    },
    applyAnchor() {
      this.$pt.navigateTo({ url: '/pages/personal/apply-anchor/main?inPage=1' })
    },
    changeDateTab(index) {
      if (index === this.activeDateTabIndex) return
      this.activeDateTabIndex = index
      switch (index) {
        case 0:
          this.startDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
          this.endDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
          break
        case 1:
          this.endDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 1), 'yyyy-MM-dd')} 23:59:59`
          this.startDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 7), 'yyyy-MM-dd')} 00:00:00`
          break
        case 2:
          this.startDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 1), 'yyyy-MM-dd')} 23:59:59`
          this.startDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 30), 'yyyy-MM-dd')} 00:00:00`
          break
      }
      this.statIncomeByRange()
    },
    // 去订单列表
    toOrder(type) {
      this.$pt.navigateTo({ url: `/pages/personal/order/main?type=${type || ''}` })
    },
    customerOrderTo(type = '') {
      this.messageEls(type, 0)
    },
    // 去pc网页版
    toPcTerminal() {
      this.$pt.navigateTo({ url: `/pages/personal/pc-terminal/main` })
    },
    // 联系客服
    concatService() {
      getCustomerInfo(this.getCustomerId).then(response => {
        if (response.isError) return
        this.serviceInfo = response.data
      }).catch((
      ) => {})
      this.layerBoolean = true
    },
    // 跳转到个人信息页
    goUserInfo() {
      if (!this.getCustomerId || this.getRoleType === 2) return
      if (this.getCustomerId && !this.$pt.getStorageSync('anchorType') && this.applyLen !== 3) {
        this.applyAnchor()
        return
      }
      if (!this.getShowBuyCard) return
      this.$pt.navigateTo({url: '/pages/personal/user-info/main'})
    },
    // 监听客服弹窗关闭事件
    closeLayer() {
      this.layerBoolean = false
    },
    messageEls(type, index) {
      let that = this
      let rejectArr = []
      if (!that.messageIdsArr[index]['ids'].length) {
        this.toOrder(type)
        return
      }
      this.$pt.requestSubscribeMessage({
        tmplIds: that.messageIdsArr[index].ids,
        success: function(res) {
          // 成功
          Object.keys(res).forEach((key) => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            that.messageIdsArr[index].ids = rejectArr
            that.$utils.showToast({ title: '请允许消息通知！' })
          } else {
            that.toOrder(type)
          }
        },
        fail(err) {
          // 失败
          console.error(err)
        }
      })
    },
    messageSubscription(messageItem) {
      messageItem['ids'] = []
      let dataStr = messageItem.dataArr.toString()
      listEnterpriseMessageConfig({
        memberId: this.getMemberId,
        ascriptionTypes: dataStr
      }).then((response) => {
        if (response.isError) return
        response.data.forEach((item) => {
          if (item.miniMadeId) {
            messageItem['ids'].push(item.miniMadeId)
          }
        })
      }).catch(() => { })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  box-sizing: border-box;
  .top-nav{
    background: #7427ff;
    color: #ffffff;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    .top-txt{
      font-size: 18px;
      color: #ffffff;
    }
    .change-account {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
    }
  }
  .user-info-box {
    .user-img-box {
      img {
        border-radius: 50%;
      }
    }
    .user-status {
      color: #fff;
      padding: 2px 12px 2px 12px;
      border-radius: 11px;
      // background: rgba(255, 255, 255, 0.5);
      background: #AB8FDD;
      .white-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        margin-right: 5px;
      }
    }
  }
  .detail-info-box {
    background-image:linear-gradient(270deg,  #FDDBBE ,#FFF2E1 70%) ;
    padding: 0px 0px 20px 0px;
    &>div:nth-child(1) {
      border-bottom: 1px solid #F5D9BF;
    }
    .date-tab {
      color: #8B4F2C;
      ul {
        li {
          position: relative;
          .active-line {
            position: absolute;
            width: 50%;
            left: 50%;
            margin-left: -25%;
            border: 2px solid #8B4F2C;
            bottom: 0;
            border-radius: 2px;
          }
        }
      }
    }
    .view-detail {
      color: #8B4F2C;
    }
    .count-info {
      align-items: flex-end;
      &>span:nth-child(1) {
        color: #491100;
        padding-right: 10px;
      }
      &>span:nth-child(2) {
        color: #AF7D5F;
      }
    }
  }
  .pancel-bar {
    background: #fff;
    border-radius: 10rpx;
    // box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
    position: relative;
    &>h3{
      padding-top: 16.5rpx;
    }
    z-index: 5;
    .shop-tools {
      flex-wrap: wrap;
      .self-flex-item {
        width: 25%;
        position: relative;
        .num-tag{
          position: absolute;
          font-size: 18rpx;
          background: #f00;
          color: #fff;
          border-radius: 50%;
          top: -7px;
          right: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}
</style>
